<template>
	<scroll-view class="sidebar" scroll-y="true">
		<view class="_flex-y" style="padding-left: 10px;">
			<template v-for="menu in leftMenus">
				<view @click="clickMenu(menu)"
					class="_wrapper-x _p5 _m-t-10 _font menu-item _ellipsis"
					:class="menu.active ? 'menu-item-active' : ''">
					<view :class="menu.icon"></view>
					<text :class="{title: menu.icon}">{{menu.text}}</text>
				</view>
			</template>
			<template v-if="leftMenus.length < 1">
				<view @click="clickMenu(selectMenu)"
					class="_wrapper-x _p5 _m-t-10 _font menu-item _ellipsis"
					:class="selectMenu.active ? 'menu-item-active' : ''">
					<view :class="selectMenu.icon"></view>
					<text :class="{title: selectMenu.icon}">{{selectMenu.text}}</text>
				</view>
			</template>
		</view>
	</scroll-view>
</template>

<script>
	import ToolUni from "@/tool/ToolUni.js";

	export default {
		computed: {
			leftMenus() {
				return this.$store.state.menu.selectChildrenList;
			},
			selectMenu() {
				return this.$store.state.menu.selectMenu;
			}
		},
		methods: {
			clickMenu(menu) {
				this.leftMenus.forEach(item => item.active = false);
				menu.active = true;
				ToolUni.toPage(menu.value);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sidebar {
		position: fixed;
		width: 160px;
		height: calc(100vh - (var(--top-window-height)));
		box-sizing: border-box;
		border-right: 1px solid darken($left-window-bg-color, 8%);
		background-color: $left-window-bg-color;
		padding-bottom: 10px;
	}

	.sidebar ::-webkit-scrollbar {
		display: none;
	}

	.menu-item:hover {
		color: #3f9dfd;
		border-right: 2px solid #3f9dfd;
	}

	.menu-item-active {
		color: #3f9dfd;
		border-right: 2px solid #3f9dfd;
	}

	.title {
		margin-left: 5px;
	}
</style>
